:root {
    --dl-color-white: #ffffff;
    --dl-color-black: #000000;

    --colors:(
        primary: #409EFF,
        success:  #67c23a,
        warning: #e6a23c,
        danger: #f56c6c,
        info: #909399
    );

    @each $val,$color in var(--colors) {
        --dl-color-$(val):$(color);
        @for $i from 3 to 9 by 2 {
            --dl-color-$(val)-light-$(i):mix(#fff,$(color),.$(i));
        }
        --dl-color-$(val)-light-8:mix(#fff,$(color), 80%);
        --dl-color-$(val)-dark-2:mix(#000,$(color), 20%); 
    }

    /* @each $val,$color in (primary, success, warning, danger, info),(#409EFF, #67c23a, #e6a23c, #f56c6c, #909399) {
        --dl-color-$(val):$(color);
        @for $i from 3 to 9 by 2 {
            --dl-color-$(val)-light-$(i):mix($(color), #fff, .$(i));
        }
        --dl-color-$(val)-light-8:mix($(color), #fff, 80%);
        --dl-color-$(val)-dark-2:mix($(color), #000, 20%); 
    } */

    /* --dl-color-primary: #409EFF;
    --dl-color-primary-light-3: #79bbff;
    --dl-color-primary-light-5: #a0cfff;
    --dl-color-primary-light-7: #c6e2ff;
    --dl-color-primary-light-8: #d9ecff;
    --dl-color-primary-light-9: #ecf5ff;
    --dl-color-primary-dark-2: #337ecc;
    --dl-color-success: #67c23a;
    --dl-color-success-light-3: #95d475;
    --dl-color-success-light-5: #b3e19d;
    --dl-color-success-light-7: #d1edc4;
    --dl-color-success-light-8: #e1f4d8;
    --dl-color-success-light-9: #f0f9eb;
    --dl-color-success-dark-2: #529b3e;
    --dl-color-warning: #e6a23c;
    --dl-color-warning-light-3: #ebb563;
    --dl-color-warning-light-5: #edc98b;
    --dl-color-warning-light-7: #f0dcb4;
    --dl-color-warning-light-8: #f3e2d0;
    --dl-color-warning-light-9: #f5f6ed;
    --dl-color-warning-dark-2: #b85e2f;
    --dl-color-danger: #f56c6c;
    --dl-color-danger-light-3: #f78989;
    --dl-color-danger-light-5: #f9a7a7;
    --dl-color-danger-light-7: #fbc4c4;
    --dl-color-danger-light-8: #fdd2d2;
    --dl-color-danger-light-9: #fef0f0;
    --dl-color-danger-dark-2: #c45656;
    --dl-color-info: #909399;
    --dl-color-info-light-3: #b3b8bf;
    --dl-color-info-light-5: #c8c9cc;
    --dl-color-info-light-7: #dcdde0;
    --dl-color-info-light-8: #e2e4e6;
    --dl-color-info-light-9: #e9ebed; */
    --dl-bg-color: #ffffff;
    --dl-bg-color-page: #f2f3f5;
    --dl-bg-color-overlay: #ffffff;
    --dl-text-color:#303133;
    --dl-text-color-primary:var(--dl-color-primary);
    --dl-text-color-regular:#606266;
    --dl-text-color-secondary:#909399;
    --dl-text-color-disabled:#c0c4cc;
    --dl-border-color:#dcdfe6;
    --dl-border-color-hover:#c0c4cc;
    --dl-border-color-light:#e4e7ed;
    --dl-border-color-lighter:#ebeef5;
    --dl-border-color-extra-light:#f2f6fc;
    --dl-border-color-dark:#dcdfe6;
    --dl-border-color-darker:#c0c4cc;
    --dl-border-color-dark-light:#e4e7ed;
    --dl-border-color-dark-lighter:#ebeef5;
    --dl-border-color-dark-extra-light:#f2f6fc;
    --dl-fill-color:#f0f2f5;
    --dl-fill-color-light:#f5f7fa;
    --dl-fill-color-lighter:#fafafa;
    --dl-fill-color-extra-light:#fafafa;
    --dl-fill-color-dark:#f0f2f5;
    --dl-fill-color-darker:#e0e2e5;
    --dl-fill-color-blank:#ffffff;

    /* border */
    --dl-border-width:1px;
    --dl-border-style:solid;
    --dl-border-color-hover:var(--dl-text-color-disabled);
    --dl-border:var(--dl-border-width) var(--dl-border-style) var(--dl-border-color);
    --dl-border-radius-base:4px;
    --dl-border-radius-small:2px;
    --dl-border-radius-mini:1px;
    --dl-border-radius-medium:8px;
    --dl-border-radius-large:12px;
    --dl-border-radius-round:20px;
    --dl-border-radius-circle:100%;

    /* font */
    --dl-font-size-extra-large:20px;
    --dl-font-size-large:18px;
    --dl-font-size-medium:16px;
    --dl-font-size-base:14px;
    --dl-font-size-small:13px;
    --dl-font-size-extra-small:12px;
    --el-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --dl-font-weight-primary:500;

    /*disabled */
    --dl-disabled-bg-color:var(--dl-fill-color-light);
    --dl-disabled-text-color:var(--dl-text-color-placeholder);
    --dl-disabled-border-color:var(--dl-border-color-light);
}